<template>
  <div class="message-detail-page">
    <van-nav-bar
        title="消息详情"
        left-text="返回"
        left-arrow
        @click-left="handleBack"
    />

    <div class="message-detail-content" v-if="message">
      <h2>{{ message.title }}</h2>
      <p class="message-time">{{ formatDate(message.createdAt) }}</p>
      <div class="message-body">
        {{ message.message }}
      </div>
    </div>

    <div v-else class="loading-container">
      <van-loading type="spinner" color="#1989fa" />
      <p class="loading-text">加载中...</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NavBar, Loading } from 'vant';
import { useNotificationStore } from '@/store/notification';

const route = useRoute();
const router = useRouter();
const notificationStore = useNotificationStore();

const message = ref<any>(null);

const messageId = Number(route.params.id);

onMounted(() => {
  if (messageId) {
    // 从 store 或 API 获取消息详细信息
    message.value = notificationStore.getNotificationById(messageId);
    if (!message.value) {
      // 如果 store 中没有，可以从 API 获取
      notificationStore.fetchNotificationDetail(messageId).then((detail) => {
        message.value = detail;
      });
    }
  }
});

const handleBack = () => {
  router.back();
};

const formatDate = (date: Date) => {
  // 格式化日期的逻辑
  return new Date(date).toLocaleString();
};
</script>

<style scoped lang="scss">
.message-detail-page {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.message-detail-content {
  flex: 1;
  padding: 20px;
  background-color: #fff;
}

.message-body {
  margin-top: 20px;
  line-height: 1.6;
  white-space: pre-wrap; /* 保留空格和换行 */
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #999;
}

.loading-text {
  margin-top: 12px;
  font-size: 14px;
  color: #999;
}
</style>